import View from "ol/View";
import TileLayer from "ol/layer/Tile"
import TileArcGISRest from 'ol/source/TileArcGISRest'
import { Style, Fill, Stroke } from 'ol/style';
// 交互 - 绘制
import Draw from 'ol/interaction/Draw';

let mapSource = new TileArcGISRest({
    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
})

/**
 * 获取图层列表
 * @param {*} maptype 0表示部署的离线瓦片地图，1表示OSM,2表示使用Arcgis在线午夜蓝地图服务
 * @returns 
 */
let mapLayerArr = () => {
    var maplayer = new TileLayer({
        source: mapSource,
        style: new Style({
            fill: new Fill({
                color: 'red'
            }),
            stroke: new Stroke({
                color: 'white'
            })
        }),
        import: 'draw'
    })
    return [maplayer];
}

/**
 * 获取视图控制。控制地图中心、缩放级别和投影
 * @returns 
 */
let view = () => {
    return new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [114.064839, 22.548857],  ////中心点经度和纬度，深圳
        zoom: 15 //地图缩放级别
    })
}

let draw = () => {
    return new Draw({
        source: mapSource,
        type: "Polygon",
    })
}

var mapconfig = {
    view,
    mapLayerArr,
    draw
};

export default mapconfig
